<template>
	<view class="detail">
		<u-navbar @leftClick="back" bgColor="#F6F9FF" 
		leftIconColor="#000000"
			:title="detail.title">
		</u-navbar>
		<view class="goods">
			<!-- #ifdef MP-WEIXIN -->
			<!-- <Model :thumb="detail.thumb"></Model> -->
			<!-- #endif -->
			<!-- #ifdef H5||APP -->
			<!-- <H5Model  :type="detail.special_type_id==2?2:1"
				:model="detail.special_type_id==2?detail.resources_address:$api.glb" :thumb="detail.thumb"></H5Model> -->
			<!-- #endif -->
			<!-- <image  :src="detail.thumb" mode=""></image> -->
			<video v-if="detail.special_type_name=='视频'"  :src="detail.resources_address"  loop="loop"  :controls="false" autoplay="autoplay" muted="muted"></video>
			<fr-image v-else @click="preview(detail.thumb)"  mode="heightFix" class="img" :flexdStatus="true" loading-ing-img="two-balls" loadingHeight='840rpx' :src="detail.thumb"  :complete-transition="true"/>
		</view>
		<view class="content">
			<view class="content-header">
				<view class="content-header-cont">
					<view class="content-header-cont-header">
						<view class="title">
							<view class="">
								<text>{{detail.title}}{{ detail.code }}</text>
							</view>
							<view class="bq">
								<view class="avatar">
									<image :src="detail.portrait" mode=""></image>
								</view>
								<view class="author">{{ detail.user_name||'' }}</view>
							</view>
						</view>
						<view class="info">
							<!-- <view class="bq">所属专辑：<text>{{detail.title}}</text></view> -->
							
							<view class="">
								<view class="count">
									<text class="text">发行</text>
									<text class="text-c">{{ detail.all_count }}份</text>
								</view>
								<view class="count">
									<text class="text">流通</text>
									<text class="text-c">{{ detail.sale_count }}份</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- v-if="detail.is_precedence!=1" -->
			<view class="chainInfo"  v-if="false">
				<view class="title">
					链上信息
				</view>
				<view class="line">
					<view class="left">
						<view class="bq">合约地址</view> <text
							style="color:#333;">{{detail.contract_address|yingcang}}</text>
					</view>
					<view class="right">
						<view class="bq" style="color: #c1c1c1; font-weight: 400;" @click="toUrls(detail.bsn_url)">查看合约
						</view>
						<image class="ico" src="../../static/images/share/lr.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="line">
					<view class="left">
						<view class="bq">链上标识</view> <text style="color:#333;">{{detail.chain_mark}}</text>
					</view>

				</view>
				<view class="line">
					<view class="left">
						<view class="bq">发布时间</view> <text style="color:#333;">{{detail.create_time}}</text>
					</view>
				</view>

			</view>
			<view class="work" v-if="false">
				<view class="tops">
					<view class="work-title">创作者介绍</view>
					<view class="btn" @click="toPage('/pages/Index/myindex?id='+detail.mer_id)">
						TA的主页
						<image class="ico" src="@/static/ico/lrs.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="author">
					<u-avatar size="42" :src="detail.portrait"></u-avatar>
					<view class="user">
						<view class="des">创作者</view>
						<view class="name">{{detail.user_name||''}}</view>
					</view>
				</view>
				<view class="work_goods_info">
					<view class="work_title">
						<u-parse :content="detail.company_int"></u-parse>
					</view>
				</view>
			</view>
			<!-- 交易记录 -->
			<Trading :id="id" v-if="false" />
			<!--<DrawLots :goods="detail"></DrawLots>-->


			<view class="describe" v-if="false">
				<view class="describe-title">作品描述</view>
				<view class="describe-content">
					<u-parse :content="detail.story"></u-parse>
				</view>
			</view>
			<view class="notice" v-if="false">
				<view class="notice_title">购买须知</view>
				<view class="des" v-html="purchase.value"></view>
			</view>
			<!-- <view class="support">疯传数藏 提供技术支持</view> -->
			<view class="btoomm" v-if="false">
				<view class="jszc">
					<image src="@/static/images/dylogo.png" mode="aspectFit"></image>
					提供技术支持
				</view>
				<view class="bah">
					<!-- 鄂ICP备2022006927号 -->
				</view>
			</view>
		</view>
		<view class="buy savepadding savebottom">
			<view class="price">
				<text>最低售价:</text>
				<text class="price">¥{{detail.base_price||0}}</text>
			</view>

			<u-button shape="circle" :plain="true" :loading="loading" :class="{error:!isBuy||detail.all_count==detail.sale_count||!detail.isBuy}"
				:disabled="!isBuy||detail.all_count==detail.sale_count||!detail.isBuy"
				@click="toPage('/pages/Order/pay',{id:detail.id,type:detail.type})">
				<block v-if="!isBuy && detail.length>0">
					<text>敬请期待</text>
					<text>{{detail.sell_time|FormatTime}}</text>
				</block>
				<block v-else-if="detail.all_count==detail.sale_count && detail.length>0">
					<text>已售罄</text>
				</block>
				<block v-else-if="detail.type==8 && detail.length>0">
					<!-- <block>
						<text>已报名待公布</text>
					</block> -->
					<block v-if="detail.isBuy">
						<text>立即报名</text>
						<text>截止时间 {{$u.timeFormat(detail.rule.end_time, 'mm月dd日hh:MM')}}</text>
					</block>
					<block v-else>
						<text>已结束</text>
					</block>
				</block>
				<block v-if="detail.all_count==detail.sale_count">
					<text>已售罄</text>
				</block>
				<view v-else class="pay">
					<text>立即购买</text>
					<text style="font-size: 25px;"> → </text>
				</view>

			</u-button>
		</view>
		<!-- 	<view class="loading" v-if="is_loading">
			<u-loading-icon color="#FFFFFF" textColor="#FFFFFF" text="努力加载中"></u-loading-icon>
		</view> -->
		<!-- <u-loading-page bgColor="#030303" :loading="true" loading-text="loading..."></u-loading-page> -->
		<view class="tabs">
			<u-tabs lineWidth="40" activeStyle="color: #292A40;font-size: 28rpx;font-weight: 800;" inactiveStyle="color: #8C93AA;font-size: 28rpx" :list="tabList" @change="changeTab"></u-tabs>
		</view>
		<view class="tabBox">
			<view class="container" v-if="current === 0">
				<view class="chainInfo">
					<view class="title">
						专辑信息
					</view>
					<view class="line">
						<view class="bq">专辑名称</view> 
						<view class="left">{{detail.title}}</view>
					</view>
					<view class="line">
						<view class="bq">合约地址</view>
						<view class="left">{{detail.contract_address|yingcang}}<u-icon name="play-right-fill" color="#8C93AA" size="10" @click="toUrls(detail.bsn_url)"></u-icon></view>
					<!-- <view class="right">
						<view class="bq" @click="toUrls(detail.bsn_url)"></view>
					</view> -->
					</view>
					<view class="line">
						<view class="bq">链上标识</view>
						<view class="left">{{detail.chain_mark|format}}</view>
					</view>
					<view class="line">
						<view class="bq">发布时间</view>
						<view class="left">{{detail.create_time}}</view>
					</view>
				</view>
				<view class="author">
					<view class="user">
						<u-avatar size="42" :src="detail.portrait"></u-avatar>
						<view style="margin-left: 10rpx;margin-top: 8rpx;" class="">
							<view class="name">
								<text class="authorName">{{detail.user_name||''}}</text>
								<text class="des">创作者</text>
							</view>
							<view class="address">{{detail.address}}</view>
						</view>
					</view>
					<!-- <view class="hisHome" @click="toPage('/pages/Index/myindex?id='+detail.mer_id)">
						<text>他的主页</text>
						<u-icon name="play-right-fill" color="#8C93AA" size="10"></u-icon>
					</view> -->
				</view>
			</view>
			<view class="container" v-if="current === 1">
				<Trading :id="id" />
			</view>
			<view class="container" v-if="current === 2">
				<view class="introduce">
					<view class="describe">
						<view class="describe-title">作品解读</view>
						<view class="describe-content">
							<u-parse :content="detail.story "></u-parse>
						</view>
					</view>
					<view class="authorInfo">
						<view class="authorInfo-title">创作者介绍</view>
						<view class="authorInfo-content">
							<view class="Info">
								<u-avatar size="32" :src="detail.portrait"></u-avatar>
								<view class="info">
									<view class="name">{{ detail.user_name||'' }}</view>
									<view class="address">{{detail.address}}</view>
								</view>
							</view>
							<!-- <view class="toHome" @click="toPage('/pages/Index/myindex?id='+detail.mer_id)">
								<text>他的主页</text>
								<u-icon name="play-right-fill" color="#8C93AA" size="10"></u-icon>
							</view> -->
						</view>
						<view class="parse">
							<u-parse :content="detail.company_int"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<ShareCard :goods="detail" :domId="aaa" :share="show" v-if="show" @close="close" />
		<u-popup :show="show" mode="bottom" :overlay=false>
			<view class="pop-content">
				<view class="pop-content-share">
					<view class="pop-content-share-item" @tap="toSharewx(1)">
						<image src="../../static/ico/wechat.png"></image>微信
					</view>
					<view class="pop-content-share-item" @tap="toSharewx(2)">
						<image src="../../static/ico/icon_share_wecircle.png"></image>朋友圈
					</view>
				</view>
				<view class="pop-content-button" @tap="show=false">取消</view>
			</view>
		</u-popup>
		<canvas canvas-id="myCanvas"
			style="width:1000px;height:1000px;position: fixed;left: 0;top: -999999px;"></canvas>

	</view>
</template>

<script>
	import frImage from '@/components/fr-image/fr-image.vue'
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Model from '@/subpage/components/3D.vue'
	import H5Model from '@/subpage/components/H53D.vue'
	import DrawLots from '@/components/DrawLots.vue'
	import Empty from "@/components/Empty.vue"
	import Trading from '@/components/trading.vue'
	var isBuy = null
	var isBuy_t = null
	import ShareCard from '@/components/wakary-poster.vue'
	export default {
		mixins: [mixin],
		components: {
			Model,
			H5Model,
			DrawLots,
			ShareCard,
			Empty,
			Trading,
			'fr-image':frImage
		},
		data() {
			return {
				aaa: '',
				id: "",
				width: 0,
				detail: {},
				purchase: {},
				loading: false,
				isBuy: false,
				is_loading: true,
				show: false,
				purchaselist: [],
				scrollTop: 0,
				current: 0,
				tabList: [
					{name:'链上信息'},
					{name:'交易信息'},
					{name:'作品介绍'}
				],
			}
		},
		onReady() {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			this.is_loading = true
			this.id = e.id
			// #ifdef MP-WEIXIN
			this.width = uni.getMenuButtonBoundingClientRect().width
			// #endif
			this.collectionInfo(e.id)
			this.getPurchase()
			// this.goodsLog(e.id);
		},
		computed: {

		},
		destroyed() {
			console.log('[-------------------------------------------页面卸载--------------------------------------]')
			clearInterval(isBuy)
			clearInterval(isBuy_t)
		},
		methods: {
			// 图片预览
			preview (url) {
				uni.previewImage({
					urls: [url],
					longPressActions: true,
					indicator: 'none'
				})
			},
			changeTab (e) {
				this.current = e.index
			},
			toUrls(url) {
				if (url) {
					//#ifdef H5
					window.open(url)
					//#endif
					// #ifdef APP
					plus.runtime.openURL(url)
					// #endif
				} else {
					this.$u.toast('暂无合约信息')
				}
			},
			toCopy(val) {
				uni.setClipboardData({
					data: val,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				});
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			toShare() {
				this.show = true
				this.aaa = '111'
			},
			//整体藏品详情
			async collectionInfo(id) {
				let data = await this.$http({
					url: this.$api.collectionInfo,
					method: 'GET',
					hideLoading: false,
					data: {
						id: id
					}
				})
				// console.log('[详情]'+JSON.stringify(data));
				if (data.code == 200) {
					data.data?.rule ? data.data.rule = JSON.parse(data.data.rule) : ''
					data.data.isBuy = true
					this.detail = Object.assign({}, data.data)
					// ----------------------------转base64-----------------------------------------
					// this.detail.thumb = ''
					// uni.getImageInfo({
					// 	src: data.data.thumb,
					// 	success: (res) => {
					// 		let imgInfo = {
					// 			width: res.width,
					// 			height: res.height,
					// 			path: data.data.thumb
					// 		}
					// 		this.recursion(imgInfo, (base) => {
					// 			this.$set(this.detail, 'thumb', base)
					// 		})
					// 	}
					// });
					// ----------------------------转base64-----------------------------------------
					// if(data.data.thumb){
					// let time=setInterval(()=>{
					// 	console.log(1);
					// 	uni.compressImage({
					// 	  src: data.data.thumb,
					// 	  quality: 80,
					// 	  success: res => {
					// 		  clearInterval(time)
					// 		  console.log(res.tempFilePath);						  
					// 		this.$set(this.detail,'thumb',res.tempFilePath)
					// 		console.log(this.detail.thumb);
					// 	  },	
					// 	fail:err=>{
					// 		console.log('错误',err);
					// 	}
					// 	})
					// },1000)


					// }
					// await this.canvasDataURL(data.data.thumb,{quality:0.2},(base64)=>{
					// 	console.log(111);
					// 	this.detail.thumb=base64
					// 	this.$set(this.detail,'thumb',base64)
					// 	})


					// uni.getImageInfo({src:data.data.thumb,
					// success:(res)=> {console.log('[图片详情]',res)}})
					// this.imagesBase(this.detail,data.data.thumb,'thumb');
					// console.log('-------',this.detail.thumb);
					this.isBuy = false
					let sell_time = this.detail.sell_time
					if (sell_time) {
						let oldTime = new Date(sell_time.replace(/-/g, '/')).getTime()
						isBuy = setInterval(() => {
							let time = new Date().getTime()
							if (time >= oldTime) {
								this.isBuy = true
								clearInterval(isBuy)
								if (data.data.type == 8) {
									let endTime = this.detail.rule.end_time.replace(/-/g, '/')
									this.detail.rule.end_time = new Date(endTime).getTime()
									isBuy_t = setInterval(() => {
										let time = new Date().getTime()
										console.log(time >= this.detail.rule.end_time)
										if (time >= this.detail.rule.end_time) {
											this.detail.isBuy = false
											clearInterval(isBuy_t)
										}
										console.log('[结束时间]', this.detail.isBuy)
									}, 1000)
								}
							}
						}, 1000)
					}
				}
				setTimeout(() => {
					this.is_loading = false
				}, 2000)
			},
			//购买须知
			async getPurchase() {
				let data = await this.getConfigDetail('purchase_instructions')
				if (data.code == 200) {
					this.purchase = data.data
				}
				console.log('[purchase]', this.purchase)
			},
			async goodsLog(ids) {
				let data = await this.$http({
					url: this.$api.goodsLog,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {
						id: ids,
						page: 1,
						page_size: 5
					}
				})
				// console.log('[流转信息]',JSON.stringify(data))
				if (data.code == 200) {
					this.purchaselist = data.data.data;
				}
			},
			toSharewx(type) {
				uni.share({
					provider: "weixin",
					scene: type == 1 ? "WXSceneSession" : "WXSceneTimeline",
					type: 0,
					href: this.detail.thumb,
					title: "疯传数藏NFT分享",
					summary: "我正在使用，赶紧跟我一起来体验！",
					imageUrl: this.detail.thumb, //"https://pro.jrxtiejin.comom/index/o/logo.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		},
		filters: {
			status(e) {
				switch (e) {
					case 1:
						return '买入'
						break;
					case 8:
						return '挂售'
						break;
					default:
						return ''
						break;
				}
			},
			FormatTime(e) {
				if (e) {
					return e.substring(5)
				}

			},
			format (e) {
				const arr = e?.split('~')
				const a = arr?.length&&arr[0].replace(/(\w{8})\w+(\w{8})/, "$1...$2");
				const b = arr?.length&&arr[1].replace(/(\w{8})\w+(\w{8})/, "$1...$2");
				return a + '~' + b
			},
			yingcang(val) {
				if (val) {
					let a = val.replace(/(\w{8})\w+(\w{8})/, "$1...$2");
					return a;
				} else {
					return "...";
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F5F5F5;
		position: relative;
.dg {
			position: absolute;
			top: -40rpx;
			width: 750rpx;
			height: 444rpx;
			z-index: 0;
		}
		
		.dgs {
			position: absolute;
			top: 242rpx;
			width: 750rpx;
			height: 912rpx;
			z-index: 0;
		}
		.goods{
			width: 750rpx;
			height: 750rpx;
			/* #ifdef H5 */
			padding-top: 100rpx;
			/* #endif */
			/* #ifdef APP-PLUS || APP */
			padding-top: 200rpx;
			/* #endif */
			text-align: center;
			background: #F6F9FF;
			.img{
				width: 100vw;
				position: none !important;
				// height: 200px;
			}
			// image{
			// 	width: 100%;
			// 	height: 100%;
			// }
		}
		
		.tabs {
			display: flex;
			justify-content: space-evenly;
			background: #fff;
			border-bottom: 1rpx solid #E0E6F0;
			margin-top: 20rpx;
			// padding-bottom: -2px;
		}
		
		.tabBox {
			background: #fff;
			padding-bottom: 120rpx;
			.container {
				margin: 0 30rpx;
				padding: 30rpx 0;
				.have {
					.stop {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;
						background: #F2F5FA;
						padding: 14rpx 10rpx;
					
						.l {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-weight: 400;
							color: #A0A0A0;
							line-height: 34rpx;
					
							.no {
								width: 32rpx;
								height: 32rpx;
								border-radius: 4rpx;
								border: 2rpx solid #DDDDDD;
								margin-right: 10rpx;
							}
					
							.yes {
								position: relative;
								width: 32rpx;
								height: 32rpx;
								border-radius: 4rpx;
								background: #468EFF;
								border: 2rpx solid #777E90;
								margin-right: 10rpx;
								&::after {
									content: '√';
									width: 30rpx;
									height: 30rpx;
									position: absolute;
									text-align: center;
									font-size: 28rpx;
									font-weight: 600;
									color: #fff;
									top: 0;
									left: 0;
									bottom: 0;
									right: 0;
									margin: auto;
								}
							}
						}
					
						.r {
							display: flex;
							justify-content: space-between;
							min-width: 338rpx;
							height: 60rpx;
							background: #F7F7FA;
							border-radius: 8rpx;
							font-size: 24rpx;
							// font-weight: 600;
							line-height: 34rpx;
							color: #C1C1C1;
							text-align: center;
							line-height: 60rpx;
							border: 2rpx solid #FFFFFF;
					
							view {
								width: 164rpx;
							}
					
							.act {
								width: 164rpx;
								color: #333333;
								height: 60rpx;
								background: #fff;
								border-radius: 8rpx;
							}
						}
					}
					
					.item {
						// width: 690rpx;
						// height: 120rpx;
						background: #FFFFFF;
						border-radius: 4rpx;
						border: 1rpx solid #E0E6F0;
						padding: 20rpx;
						box-sizing: border-box;
						.top {
							display: flex;
							justify-content: space-between;
							.item-info {
								.info-number {
									font-size: 28rpx;
									font-weight: 600;
									color: #16172F;
								}
								.status {
									width: 96rpx;
									height: 34rpx;
									font-size: 24rpx;
									background: #E3EAF5;
									color: #8C93AA;
									border-radius: 1rpx 20rpx 1rpx 20rpx;
									padding: 0 12rpx;
									margin-left: 10rpx;
								}
								.onSale {
									background: #468EFF;
									color: #fff;
								}
							}
							.item-price {
								font-size: 36rpx;
								font-weight: bold;
								color: #16172F;
							}
							
						}
						.footer {
							display: flex;
							justify-content: space-between;
							.iden {
								width: 211rpx;
								font-size: 24rpx;
								color: #8C93AA;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.tips {
								font-size: 24rpx;
								color: #8C93AA;
							}
						}
						&:not(:first-child) {
							margin-top: 20rpx;
						}
					}
					.active {
						background: #16172F;
						.info-number {
							color: #fff !important;
						}
						.status {
							background: rgba(255,255,255,0.4) !important;
							color: #fff !important;
						}
						.onSale {
							background: #468EFF !important;
							color: #fff;
						}
						.item-price {
							color: #fff !important;
						}
					}
				}
				.chainInfo{
					background: #ffffff;
					border-radius: 8rpx;
					padding: 38rpx 0;
					border-bottom: 1rpx solid #E0E6F0;
					.title{
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						line-height: 40rpx;
						margin-bottom: 32rpx;
					}
					.line{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 20rpx 0;
						.bq{
							font-size: 24rpx;
							color: #8C93AA;
							margin-right: 30rpx;
							text-align-last: justify;
							width: 100rpx;
							white-space: nowrap;
						}
						.left{
							font-size: 24rpx;
							font-weight: 600;
							color: #333333;
							line-height: 34rpx;
							display: flex;
							word-break: break-all;
						}
					}
					.ico{width: 24rpx;height: 24rpx; margin-left: 10rpx;}
					
					.right{
						font-size: 24rpx;
						font-weight: 600;
						color: #C1C1C1;
						display: flex;
						align-items: center;
					}
				}
				.author{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom:18rpx;
					margin-top: 18rpx;
					.user{
						display: flex;
						margin-left: 16rpx;
						.name{
							display: flex;
							font-size: 28rpx;
							font-weight: 600;
							color: #000;
							line-height: 40rpx;
							.authorName {
								// width: 200rpx;
								flex: 1;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
							.des {
								flex: 1;
								position: relative;
								display: inline-block;
								font-size: 24rpx;
								color: #FF8146;
								font-weight: 400;
								margin-left: 20rpx;
								&::after {
									content: '';
									position: absolute;
									width: 8rpx;
									height: 8rpx;
									border-top: 1rpx solid #FF8146;
									border-right: 1rpx solid #FF8146;
								}
								&::before {
									content: '';
									position: absolute;
									left: -8rpx;
									bottom: 8rpx;
									width: 8rpx;
									height: 10rpx;
									border-bottom: 1rpx solid #FF8146;
									border-left: 1rpx solid #FF8146;
								}
							}
						}
						.address {
							width: 300rpx;
							color: #8C93AA;
							font-size: 24rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
					.hisHome {
						display: flex;
						font-size: 24rpx;
						color: #8C93AA;
					}
				}
				.introduce {
					.describe{
						background: #FFF;
						border-radius: 8rpx;
						&-title{
							font-size: 32rpx;
							font-weight: 600;
							color: #16172F;
							line-height: 40rpx;
						}
						&-content{
							margin-top: 20rpx;
							font-size: 24rpx;
							color: #8C93AA;
						}
					}
					.authorInfo {
						margin-top: 40rpx;
						&-title{
							font-size: 32rpx;
							font-weight: 600;
							color: #16172F;
							line-height: 40rpx;
						}
						&-content {
							display: flex;
							align-items: center;
							justify-content: space-between;
							.Info {
								display: flex;
								align-items: center;
								margin-top: 28rpx;
								.info {
									margin-left: 20rpx;
									.name {
										font-size: 28rpx;
										color: #16172F;
										font-weight: 600;
									}
									.address {
										font-size: 24rpx;
										color: #8C93AA;
									}
								}
							}
							.toHome {
								display: flex;
								font-size: 24rpx;
								color: #8c93aa;
							}
						}
						.parse {
							font-size: 24rpx;
							color: #8C93AA;
							margin-top: 24rpx;
						}
					}
				}
			}
		}

		.content {
			background: #F6F9FF;
			&-header {
				// padding: 132rpx 76rpx 22rpx 78rpx;
				box-sizing: border-box;
				// min-height: 302rpx;
				// background: #FFFFFF url(@/static/images/tray.png)center center no-repeat;
				background-size: 100% 100%;

				&-cont {
					display: flex;
					justify-content: center;
					align-items: center;
					&-header {
						width: 100%;
						display: flex;
						justify-content: space-between;
						background: #FFFFFF;
						border-radius: 8rpx;
						padding: 30rpx;
						box-sizing: border-box;
						z-index: 888;
						.title {
							justify-content: space-between;
							align-items: center;
							font-size: 36rpx;
							font-weight: 600;
							color: #292A40;
							.tags {
								display: flex;
								justify-content: center;
								align-items: center;
							
								.tag {
									display: inline-block;
									// margin-left: 12rpx;
									// margin-top: 10rpx;
							
									text {
										display: inline-block;
										padding: 2rpx 12rpx;
										background: #B6B6B6;
										border-radius: 4rpx;
										font-size: 24rpx;
										font-weight: 600;
										color: #FFF;
										line-height: 34rpx;
							
										&.number {
											margin-left: 0;
											background: #000;
											border-radius: 4rpx 0px 0px 4rpx;
											color: #FFF;
										}
									}
								}
							}
							.bq {
								display: flex;
								font-size: 24rpx;
								color: #8C93AA;
								margin-top: 12rpx;
								.avatar {
									width: 32rpx;
									height: 32rpx;
									image {
										width: 100%;
										height: 100%;
										border-radius: 50%;
									}
								}
								.author {
									margin-left: 10rpx;
								}
							}
						}
						.info {
							display: flex;
							justify-content: space-between;
							align-items: center;
							.count {
								display: flex;
								height: 50rpx;
								background: #fff;
								border-radius: 4rpx;
								border: 1rpx solid #F2F5FA;
								padding: 4rpx;
								box-sizing: border-box;
								&:nth-child(2) {
									margin-top: 12rpx;
								}
								.text {
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 24rpx;
									background: #F2F5FA;
									border-radius: 2rpx;
									opacity: 0.4;
									color: #8C93AA;
									padding: 8rpx;
									box-sizing: border-box;
								}
								.text-c {
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 24rpx;
									color: #8C93AA;
									margin-left: 8rpx;
									// font-weight: bold;
								}
							}
						}

						&-top {
							.title {
								text-align: center;

								text {
									font-size: 32rpx;
									font-weight: 600;
									color: #222;
									line-height: 44rpx;

								}
							}

							
						}
					}

					.tips {
						margin-top: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #9EA1AF;
						display: flex;
						align-items: center;
						justify-content: center;

						&-y {
							display: inline-block;
							width: 6rpx;
							height: 8rpx;
							border-radius: 3rpx;
							border: 2rpx solid #9EA1AF;
						}

						&-cont {
							margin: 0 8rpx;
							position: relative;

							&::after {
								content: '';
								width: 118rpx;
								height: 2rpx;
								background: linear-gradient(90deg, #9EA1AF 0%, rgba(242, 235, 228, 0) 100%);
								position: absolute;
								right: -134rpx;
								top: 50%
							}

							&::before {
								content: '';
								width: 118rpx;
								height: 2rpx;
								background: linear-gradient(90deg, rgba(242, 235, 228, 0) 0%, #E1D3C5 100%);
								position: absolute;
								left: -134rpx;
								top: 50%
							}
						}
					}

				}

			}

			.work {
				background: #FFF;
				// margin: 0 0rpx;
				padding: 22rpx 28rpx;
				margin: 30rpx;
				border-radius: 8rpx;

				&-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					line-height: 40rpx;
				}

				.tops {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						font-size: 24rpx;
						font-weight: 400;
						color: #C1C1C1;
						padding: 4rpx 14rpx;
						border-radius: 100rpx;
						display: flex;
						align-items: center;
					}

					.ico {
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
				}

				.author {
					display: flex;
					align-items: center;
					padding-bottom: 18rpx;
					margin-top: 38rpx;

					.user {
						margin-left: 16rpx;

						.des {
							font-size: 24rpx;
						}

						.name,
						.des {
							font-size: 28rpx;
							font-weight: 600;
							color: #000;
							// line-height: 40rpx;
						}

						.name {
							display: flex;
							align-items: center;

							.fzico {
								height: 32rpx;
								width: 32rpx;
								margin-left: 10rpx;
							}
						}

					}
				}

				.work-title {
					font-size: 28rpx;
					font-weight: 600;

					::v-deep image {
						max-width: 100% !important;
					}
				}


				.left {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: flex-end;
				}

				.title {
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 40rpx;
					margin: 5rpx 0;
				}

				.num {
					margin: 5rpx 0;
					font-size: 22rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #999999;
					line-height: 32rpx;
				}

			}

			.work_goods_info {
				.work_title {
					font-size: 24rpx;
					// font-weight: 600;
					color: #999999;

					::v-deep image {
						max-width: 100% !important;
					}
				}
			}

			.chainInfo {
				padding: 28rpx 32rpx;
				background: #FFF;
				// margin: 0 0rpx 18rpx;
				margin: 30rpx;
				border-radius: 8rpx;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					line-height: 40rpx;
					margin-bottom: 32rpx;
				}

				.line {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 20rpx 0;
				}

				.ico {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}

				.left {
					font-size: 24rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 34rpx;
					display: flex;

					.bq {
						color: #999999;
						margin-right: 30rpx;
						text-align-last: justify;
						width: 100rpx;
						white-space: nowrap;
					}
				}

				.right {
					font-size: 24rpx;
					font-weight: 600;
					color: #333;
					display: flex;
					align-items: center;
				}
			}

			.describe {
				padding: 28rpx 32rpx;
				background: #FFF;
				// margin: 0 0rpx;
				// margin-top: 18rpx;
				margin: 30rpx;
				border-radius: 8rpx;

				&-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					line-height: 40rpx;
				}

				&-content {
					margin-top: 32rpx;
					font-size: 24rpx;
					// font-weight: 600;
					color: #999999;
					// line-height: 34rpx;

				}
			}

			.notice {
				background: #FFF;
				padding: 22rpx 28rpx;
				// margin: 0 0rpx;
				// margin-top: 18rpx;
				margin: 30rpx;
				border-radius: 8rpx;

				.notice_title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					line-height: 40rpx;
				}

				.des {
					margin-top: 32rpx;
					font-size: 24rpx;
					// font-weight: 600;
					color: #999999;
					// line-height: 34rpx;
				}
			}

			.support {
				font-size: 24rpx;
				font-weight: 400;
				color: #808080;
				line-height: 36rpx;
				text-align: center;
				padding: 44rpx 0 200rpx 0;
			}

			.btoomm {
				margin: 20rpx auto 30rpx;
				padding-top: 30rpx;
				min-height: 300rpx;
				background: #FFFFFF;

				.jszc {
					display: flex;
					align-items: flex-end;
					justify-content: center;
					color: #C0C0C0;
					font-size: 32rpx;

					image {
						height: 65rpx;
						width: 65rpx;
						margin-right: 10rpx;
					}
				}

				.bah {
					color: #C0C0C0;
					font-size: 26rpx;
					text-align: center;
					margin-top: 20rpx
				}
			}
		}

		.buy {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 24rpx 28rpx 46rpx;
			box-sizing: border-box;
			background: #FFF;
			box-shadow: 0px 4rpx 4rpx 4rpx rgba(219,219,219,0.5);
			z-index: 100;
			::v-deep button {
				width: 300rpx;
				height: 76rpx;
				margin: 0;
				display: flex;
				justify-content: center;
				flex-direction: column;
				border-color: #979797;

				&.error {
					background: #fff;
					text {
						color: #16172F;
					}
				}

				text {
					font-size: 30rpx;
					font-weight: 600;
					color: #FFF;
					line-height: 42rpx;

					&:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #4E422C;
						line-height: 34rpx;
					}
				}
				.pay {
					width: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-size: 30rpx;
					font-weight: 600;
					color: #16172F;
					line-height: 42rpx;
					text {
						font-size: 30rpx;
						font-weight: 600;
						color: #16172F;
						line-height: 42rpx;
					}
				}
			}

			.price {
				font-size: 24rpx;
				color: #8C93AA;
				line-height: 34rpx;

				text.price {
					font-size: 40rpx;
					color: #16172F;
					font-weight: 600;
				}
			}
		}

		@keyframes myRotate {
		 0% {
				transform: rotateY(0deg);
			}

			100% {
				transform: rotateY(-360deg);
			}
		}

		.loading {
			width: 100vw;
			height: 100vh;
			background-color: #030303;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 9999;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		}
	}

	.pop-content {
		padding: 20rpx 0rpx 40rpx 0rpx;
		border-radius: 0rpx 0rpx 30rpx 30rpx;

		&-share {
			display: flex;
			flex-direction: row;
			padding: 40rpx 200rpx 10rpx 200rpx;
			align-items: center;
			justify-content: space-between;
		}

		&-share-item {
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			align-items: center;

			image {
				margin-bottom: 15rpx;
				width: 92rpx;
				height: 92rpx;
			}
		}

		&-button {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #000;
			margin: 0rpx 100rpx;
			text-align: center;
			color: #FFF;
			margin-top: 30rpx;
			font-size: 30rpx;
			font-weight: 600;
		}
	}
</style>
